<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    margin-bottom: 2px;
  }
  .title-size {
    font-weight: bold;
    font-size: 1rem;
  }
  .ml2 {
    margin-left: 2px;
  }
</style>
<template>
  <div>
      <Form label-position="right" :label-width="100" style="position: relative;" :model="formDate">
      <Row class="mb20">
        <Col span="15" class="ivu-form-item-label title-size">公共租赁住房转社区受理情况</Col>
      </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">申请人姓名：</Col>
        <Col span="9" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.applyPerson" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">申请人身份证号：</Col>
        <Col span="9" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.applyIdCard" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">家庭原始户籍所在区域：</Col>
        <Col span="9" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.yundizhi" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">家庭要转到的区域：</Col>
        <Col span="3" offset="1">
          <Select v-model="select1">
            <Option v-for="item in sectionList" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Select v-model="select2" class="ml2">
            <Option v-for="item in streetList" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </Col>
        <Col span="3">
          <Select v-model="select3" class="ml2" @on-change="getValidateRules()">
            <Option v-for="item in committeesList" :value="item.company_code" :key="item.id">{{ item.title }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">社区经办人：</Col>
        <Col span="9" offset="1">
          <Input v-model="formDate.beginPerson" ></Input>
        </Col>
      </Row>
        <Row class="mb20">
          <Col span="8" class="ivu-form-item-label">社区负责人：</Col>
          <Col span="9" offset="1">
            <Input v-model="formDate.committeePrincipal" ></Input>
          </Col>
        </Row>
      <Row class="mb20">
        <Col span="8" class="ivu-form-item-label">申请时间：</Col>
        <Col span="9" offset="1">
          <DatePicker type="date" v-model="formDate.beginDate" style="width: 200px"></DatePicker>
        </Col>
      </Row>
        <Row class="mb20">
          <Col span="8" class="ivu-form-item-label">受理时间：</Col>
          <Col span="9" offset="1">
            <DatePicker type="date" v-model="formDate.acceptDate" style="width: 200px"></DatePicker>
          </Col>
        </Row>
      <Row class="mb20">
        <Col span="13" class="ivu-form-item-label">
          <Button @click="save()">提交</Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { date2str, getMailLevelList, getSQCodeFc } from '@/api/eventlist'
export default {
  name: 'Form6',
  data () {
    return {
      bwk: '0',
      paramsArr: [],
      list: [],
      sectionList: [],
      streetList: [],
      committeesList: [],
      select1: '',
      select2: '',
      select3: ''
    }
  },
  props: {
    formDate: Object,
    ruleData: Object
  },
  mounted () {
    if (this.formDate.qxId || this.formDate.jdId || this.formDate.company_code) {
      this.select1 = this.formDate.qxId
      this.select2 = this.formDate.jdId
      this.select3 = this.formDate.company_code
    }
    this.getPermanentAddress()
  },
  watch: {
    select1 (val) {
      this.formDate.qxId = val
      getMailLevelList({ 'id': val }).then(res => {
        if (res.data.errcode === 0) {
          this.streetList = res.data.data
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    select2 (val) {
      this.formDate.jdId = val
      getMailLevelList({ 'id': val }).then(res => {
        if (res.data.errcode === 0) {
          this.committeesList = res.data.data
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    select3 (val) {
      this.formDate.company_code = val
    }
  },
  methods: {
    getPermanentAddress () {
      getMailLevelList().then(res => {
        if (res.data.errcode === 0) {
          this.sectionList = res.data.data
          console.log(this.sectionList)
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    getValidateRules () {
      let q = { company_code: this.select3 }
      getSQCodeFc(q).then(res => {
        if (res.data.errcode === 0) {
          this.formDate.toSection = res.data.data.qu_code
          this.formDate.toStreet = res.data.data.jiedao_code
          this.formDate.toCommittee = res.data.data.shequ_code
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    save () {
      this.formDate.beginDate = date2str(this.formDate.beginDate)
      this.formDate.acceptDate = date2str(this.formDate.acceptDate)
      console.log(this.formDate)
      // 判断必填字段是否为空
      if (!this.formDate.toSection) {
        this.$Notice.error({ title: '请选择家庭要转到的区县', desc: '' })
        return false
      } else if (!this.formDate.toStreet) {
        this.$Notice.error({ title: '请选择家庭要转到的街道', desc: '' })
        return false
      } else if (!this.formDate.toCommittee) {
        this.$Notice.error({ title: '请选择家庭要转到的社区', desc: '' })
        return false
      } else if (!this.formDate.beginPerson) {
        this.$Notice.error({ title: '请填写社区经办人', desc: '' })
        return false
      } else if (!this.formDate.beginDate) {
        this.$Notice.error({ title: '请选择申请时间', desc: '' })
        return false
      } else {
        this.$emit('ee')
      }
    }
  }
}
</script>
